import React from 'react'
import { Row, Col, Card, Tag } from 'antd'
import { HeartOutlined, MedicineBoxOutlined, BookOutlined } from '@ant-design/icons'

const VillageService: React.FC = () => {
  const services = [
    {
      title: '生活服务',
      description: '水电煤等生活缴费服务',
      status: 'active',
      icon: <HeartOutlined />
    },
    {
      title: '医疗健康',
      description: '在线医疗咨询和预约服务',
      status: 'developing',
      icon: <MedicineBoxOutlined />
    },
    {
      title: '教育培训',
      description: '职业技能培训资源',
      status: 'active',
      icon: <BookOutlined />
    }
  ]

  return (
    <div>
      <div className="page-title">
        <HeartOutlined />
        村民日常生活与公共事业服务
      </div>

      <Row gutter={[16, 16]}>
        {services.map((service, index) => (
          <Col xs={24} sm={12} lg={8} key={index}>
            <Card 
              className="custom-card"
              actions={[
                <a key="view">查看详情</a>,
                <a key="use">立即使用</a>
              ]}
            >
              <Card.Meta
                avatar={service.icon}
                title={
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    {service.title}
                    <Tag color={service.status === 'active' ? 'success' : 'processing'}>
                      {service.status === 'active' ? '已上线' : '开发中'}
                    </Tag>
                  </div>
                }
                description={service.description}
              />
            </Card>
          </Col>
        ))}
      </Row>
    </div>
  )
}

export default VillageService